<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户列表demo</title>
		<!-- html是一种解释执行的语言 -->
		<!-- 导入JS函数类库 -->
		<script src="jquery-3.6.0.min.js"></script>
		<script>
			
			//让页面加载完成之后,再次调用
			//编程方式: 函数式编程
			$(function(){
				
				/**
				 * 常见Ajax写法:
				 * 	 1.$.ajax({})
				 *   2.$.get()   get类型
				 *   3.$.post()
				 * 	 4.$.getJSON()
				 */
				
				/**
				 * 语法说明:
				 * 	$.get(url,data,function(data){},dataType)
				 * 参数说明:
				 * 		1.url: 请求服务器的网址
				 * 		2.data: 前端向服务器传递的参数  字符串
				 * 		3.回调函数: 请求成功之后开始回调
				 * 		4.dataType: 返回值结果的数据类型. 可以省略自动判断
				 *	
				 */
				var url = "http://localhost:8090/getAll"
				/**
				 * 关于data语法: id=100  name="tom"
				 * 写法: 25上课!!!!
				 * 		1.JS对象写法
				 * 		  {id:100,name:"tom"}
				 * 		2.字符串拼接
				 * 		  id=100&name=tom
				 */
				//var data = "id=100&name=tom"
				var data = {id:100,name:"tom"}
				
				//JS可以将接收的JSON串动态转化为JS对象
				$.get(url,function(data){
					//循环遍历返回值
					//of 关键字 直接获取遍历对象
					for(user of data){
						//获取数据信息
						var tr = 
						`<tr align="center">
							<td>${user.id}</td>
							<td>${user.name}</td>
							<td>${user.age}</td>
							<td>${user.sex}</td>
							<td>
								<button>修改</button>
								<button>删除</button>
							</td>
						 </tr>`
						 
						 //将tr标签追加到表格中
						 $("#tab1").append(tr)
					}
				})
				
				
				/**
				 * 传统Ajax 功能强大
				 */
				$.ajax({
					url: "http://localhost:8090/getAll",
					type: "get",
					data: {id:100,name:"tomcat"},
					success: function(data){
						console.log(data)
					},
					error: function(data){//浏览器的返回值
						console.log(data)
					},
					async: true  //默认为true 异步   false 同步调用
				})
				
			})
			
			
			
			/* 
			 1. 基本循环
			 for(var i=0; i<data.length;i++){
			 	console.log(data[i])
			 }
			 
			 2.in 关键字
			 for(index in data){
			 	console.log(data[index])
			 }
			 
			 */
			
		</script>
	</head>
	<body>
		<table id="tab1" border="1px" align="center" width="80%">
			<tr>
				<td colspan="5" align="center"><h1>用户列表</h1></td>
			</tr>
			<tr>
				<td align="center">编号</td>
				<td align="center">姓名</td>
				<td align="center">年龄</td>
				<td align="center">性别</td>
				<td align="center">操作</td>
			</tr>
			<!-- <tr>
				<td align="center">100</td>
				<td align="center">黑熊精</td>
				<td align="center">3000</td>
				<td align="center">男</td>
			</tr> -->
		</table>
	</body>
</html>
